<template>
    <div class="container">
        <div class="loading">
            <div v-for="i in 36" class="dot" :key="i"></div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
$ballSize: 15px;
$containerSize: 200px;
$n: 36;
$pDeg: calc(360deg / $n);
$duration: 2s;

.container {
    background-color: cyan;
    padding: $ballSize;
    border-radius: 10%;

    .loading {
        // background-color: cyan;
        height: $containerSize;
        width: $containerSize;
        border: 1px solid purple;
        margin: 50px auto;
        position: relative;
        border-radius: 50%;

        .dot {
            position: absolute;
            left: 50%;
            top: 0;
            width: $ballSize;
            height: $ballSize;
            margin-left: calc(-1 * $ballSize / 2);
            margin-top: calc(-1 * $ballSize / 2);
            transform-origin: center calc($containerSize / 2 + $ballSize / 2);

            @for $i from 1 through 36 {
                &:nth-child(#{$i}) {
                    transform: rotate(($i - 1) * $pDeg);

                    &::before,
                    &::after {
                        animation-delay: calc(-1 * $duration / $n * ($i - 1) * 6);
                    }
                }
            }

            perspective: 70px;
            transform-style: preserve-3d;

            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            &::before {
                background-color: #000;
                top: -100%;
                animation: move-black $duration linear infinite;

                @keyframes move-black {
                    0% {
                        animation-timing-function: ease-in;
                    }

                    25% {
                        transform: translate3d(0, 100%, $ballSize);
                        animation-timing-function: ease-out;
                    }

                    50% {
                        transform: translate3d(0, 200%, $ballSize);
                        animation-timing-function: ease-in;
                    }

                    75% {
                        transform: translate3d(0, 100%, -$ballSize);
                        animation-timing-function: ease-out;
                    }
                }
            }

            &::after {
                background-color: #fff;
                top: 100%;
                animation: move-white $duration linear infinite;

                @keyframes move-white {
                    0% {
                        animation-timing-function: ease-in;
                    }

                    25% {
                        transform: translate3d(0, -100%, $ballSize);
                        animation-timing-function: ease-out;
                    }

                    50% {
                        transform: translate3d(0, -200%, $ballSize);
                        animation-timing-function: ease-in;
                    }

                    75% {
                        transform: translate3d(0, -100%, -$ballSize);
                        animation-timing-function: ease-out;
                    }
                }
            }
        }
    }
}
</style>